<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script>
        $(function () {
           
        });
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:false,border:false" style="height:25px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:30px;"></div>
    <!-- <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div> -->
    <div data-options="region:'west',title:'West',split:true" style="width:200px;">
        <div id="aa" class="easyui-accordion" style="width:300px;">
            <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                <p>Accordion is a part of easyui framework for jQuery.
                It lets you define your accordion component on web page more easily.</p>
            </div>
            <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                content2
            </div>
            <div title="Title3">
                content3
            </div>
        </div>
    </div>
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
        <div id="tt" class="easyui-tabs" fit="true" >
            <div title="Tab1" style="padding:20px;display:none;">
                tab1
            </div>
            <div title="Tab2" data-options="iconCls:'icon-save',closable:true" style="overflow:auto;padding:20px;display:none;">
                tab2
            </div>
            <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
                tab3
            </div>
        </div>
    </div>
</body>

</html>